<form class="example-form">
  <input [(ngModel)]="user.id" name="id" hidden="hidden">
  <div class="example-container">
    <mat-form-field>
      <span matPrefix>姓名：</span>
      <input [(ngModel)]="user.name" name="name" matInput placeholder="输入你的姓名">
    </mat-form-field>
    <mat-slide-toggle [(ngModel)]="user.isOn" name="isOn">启用</mat-slide-toggle>
  </div>
  <div class="example-container">
    <mat-radio-group  [(ngModel)]="user.sex" name="sex">
      <span matPrefix>性别：</span>
      <mat-radio-button value="1">男</mat-radio-button>
      <mat-radio-button value="2">女</mat-radio-button>
    </mat-radio-group>
  </div>
  <div class="example-container">
    <mat-form-field>
      <span matPrefix>生日：</span>
      <input matInput [(ngModel)]="user.birthDay" name="birthDay" [matDatepicker]="picker" placeholder="请点击右侧日历">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  </div>
  <div class="example-container">
    <mat-form-field>
      <span matPrefix>分组：</span>
      <mat-select [(ngModel)]="user.groups" name="groups" placeholder="请选择一个选项">
        <mat-option value="0">一般</mat-option>
        <mat-option value="1">重要</mat-option>
      </mat-select>
      {{user.groups}}
    </mat-form-field>
    <mat-checkbox [(ngModel)]="user.veryConcerned" name="veryConcerned">特别关心</mat-checkbox>
  </div>
  <div class="example-container" >
    <span matPrefix>能力值：</span>
    <mat-slider [(ngModel)]="user.abilityValue" name="abilityValue"></mat-slider>
  </div>
  <div class="example-container">
    <mat-form-field>
      <span matPrefix>备注：</span>
      <textarea [(ngModel)]="user.remark" name="remark" matInput placeholder="请输入备注"></textarea>
    </mat-form-field>
  </div>
  <div class="example-container">
    <button (click)="add();" mat-raised-button color="primary">提交</button>
  </div>

</form>
